<template>
 <div class="box-1">
    <div class="div-1">加入合伙人</div>
  <img class="img-1" src="../assets/hh.png" alt="">
  <div class="div-2">开通合伙人VIP会员</div>
  <div class="div-3">
    <div class="box"
     v-for="(item, index) in tu"
     :class="{bian:index==bianse}"
     @click="sel(index)"
     >
      <p class="p-1">{{item.yue}} </p>
      <p class="p-2">￥{{item.money}} </p>
      <p class="p-3">{{item.can}} </p>
    </div>
  </div>
  <div class="div-4">
    <p class="p-4">合伙人权益:</p>
    <p class="p-5">合伙人VIP用户可在拼团时，点击“我要开团”购买该商品，拼团直接默认未品中，瓜分参与奖</p>
    <button class="button">立即开通</button>
  </div>
 </div>
</template>

<script>
export default {
    name:'HeHuo',
    data() {
      return {
        bianse:0,
        tu:[{
          yue:'包月VIP',
          money:29,
          can:'默认未品中，分瓜参与奖'
        },{
          yue:'包年VIP',
          money:360,
          can:'默认未品中，分瓜参与奖'
        },]
      }
    },
    methods: {
      sel(index){
        console.log(index);
        this.bianse=index
      }
    },
}
</script>

<style lang="less" scoped> 
*{
  background-color: rgb(255, 255, 255);
}
  .box-1{
    box-sizing: border-box;
  .div-1{
    // font-weight: bold;
    font-size: 1rem;
    text-align: center;
    padding:0.5rem 0 1rem 0 ;
    background-color: rgb(255, 255, 255);
  }
  .img-1{
    width: 100%;
  }
  .div-2{
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    padding:0.5rem 0 1rem 0 ;
    background-color: rgb(255, 255, 255);
  }
  .div-3{
    width: 100%;
    display: flex;
    padding: 0.7rem;
    justify-content: space-between;
    box-sizing: border-box;
     .box{
       width: 8.9rem;
       font-size: 1rem;
       padding: 0.3rem;
       background-color: rgb(236, 236, 236);
       box-sizing: border-box;
       border-radius: 0.5rem;
      //  box-shadow:0 0 0 2px black inset;
      //  margin: 0.5rem;
       .p-1{
         text-align: center;
         font-size: 0.7rem;
         margin: 0 0 0.2rem 0;
         background-color: rgb(236, 236, 236);
         color: rgb(126, 126, 126);
       }
       .p-2{
         text-align: center;
         font-size: 1.3rem;
         font-weight: 600;
         background-color: rgb(236, 236, 236);
         color: rgb(255, 17, 17);
       }
       .p-3{
         text-align: center;
         font-size: 0.7rem;
         background-color: rgb(236, 236, 236);
         color: rgb(126, 126, 126);
         margin: 0.1rem 0 0.4rem 0;
       }
    }
  }
  .div-4{
    padding: 0.7rem;
    .p-4{
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 0.2rem;
    }
    .p-5{
      font-size: 0.8rem;
      color: rgb(116, 112, 112);
    }
    .button{
      width: 100%;
      height: 2.5rem;
      font-size:0.9rem;
      color: rgb(238, 223, 223);
      background-color: rgb(233, 56, 56);
      border: none;
      border-radius: 2rem;
      margin:2rem 0 3.3rem 0;
      box-sizing: border-box;
    }
  }
}
  .bian{
    // border:2px solid red;
    box-shadow:0 0 0 2px rgb(218, 64, 64) inset;
  }
</style>